import { Flex, Tabs } from "antd";

export default function App() {
  const options = [
    {
      label: "Gemini",
      value: "https://gemini.google.com/",
      icon: <img src={`/gemini.svg`} style={{ height: 13 }} />
    },
    {
      label: "千问",
      value: "https://chat.qwen.ai/",
      icon: <img src={`/qwen.svg`} style={{ height: 13 }} />
    },
    // {
    //   label: "通义",
    //   value: "https://www.tongyi.com/",
    //   icon: <img src={`/tongyi.png`} style={{ height: 12 }} />
    // },
  ];

  return (
    <Flex vertical style={{ height: "100vh" }}>
      {/* <Segmented style={{ background: "#222" }} options={options}></Segmented> */}
      {/* <webview style={{ flexGrow: 1 }} src="https://gemini.google.com/" /> */}
      <Tabs
        style={{ flexGrow: 1 }}
        tabBarStyle={{
          marginBottom: 0,
          paddingLeft: 24,
          height: 36,
          borderBottom: "1px solid #000",
        }}
      >
        {options.map((item) => {
          return (
            <Tabs.TabPane
              tab={
                <Flex align="center" justify="center">
                  <span style={{ marginRight: 4 }}>{item.icon}</span>
                  <span>{item.label}</span>
                </Flex>
              }
              style={{ height: "100%" }}
              key={item.value}
            >
              <webview style={{ height: "100%" }} src={item.value} />
            </Tabs.TabPane>
          );
        })}
      </Tabs>
    </Flex>
  );
}
